<!DOCTYPE html>
<html>
<head>
	<title>area</title>
</head>
<body>

	<div>
		<div class="select-grop inline" style="display: inline-block">
			<span class="fc w70">省市区:</span>
			<select name="" id="city">
				<option value="">请选择</option>
			</select>
			<select name="" id="xian">
				<option value="">请选择</option>
			</select>
			<select name="" id="qu">
				<option value="">请选择</option>
			</select>
		</div>
	</div>

	<!-- <script type="text/javascript" src='./js/jquery-3.1.1.min.js'></script> -->
	<script type="text/javascript" src='./js/jquery.js'></script>
	<script type="text/javascript" src='./js/area.js'></script>
	<script type="text/javascript">
		// 三级联动
		// 省市区
		var city = document.getElementById("city");
		var xian = document.getElementById("xian");
		var qu = document.getElementById("qu");
		var l = area.length;
		// 初始化省级select
		area.forEach(function (i) {
		    var option = document.createElement("option");
		    option.value = i.code;
		    option.text = i.region;
		    city.appendChild(option);
		})
		// 获取的编码
		// 最终编码
		// var code_city = 0;
		// var code_shi = 0;
		var code_qu = '';
		var code_qu_a = '';
		var please_select='<option value="">请选择</option>'
		// console.log(city)
		$("#city").change(function(){
			if ($(this).attr("value") === '') {
				$("#xian").html(please_select);
				$("#qu").html(please_select);
				code_qu = '';
				return;
			}
		    xian.options.length = 0;
		    qu.options.length = 0;
		    // 省的编码
		    code_city = Number($(this).attr("value"));
		    // 返回符合条件的 市数组
		    var item = filter(area, code_city);
		    // 遍历市级下面的区级数组
		    setTargetArr(item, xian);
		    code_shi = xian.value;

		    // 返回当前所选的县级数组
		    var item1 = filter(item.regionEntitys, Number(xian.value))
		    setTargetArr(item1, qu);
		    code_qu = qu.value;
		    // console.log(this.options[this.selectedIndex].innerText);
		    // console.log('省: ' + code_city);
		    // console.log('县级： ' + xian.value)
		    // console.log('区级： ' + qu.value)
		    // $("#xian").prepend(please_select)
		    // $("#xian").prepend(please_select)
		    // $("#xian option:eq(0):selected")
		})
		$("#xian").change(function(){
		    qu.options.length = 0;
		    code_shi = Number($(this).attr("value"));
		    // 返回当前市级数组
		    var item = filter(area, code_city)
		    var item2 = filter(item.regionEntitys, code_shi);
		    console.log("县： " + code_shi)
		    setTargetArr(item2, qu);
		    // $("#qu option:eq(0):selected")
		    $("#qu").prepend(please_select)
		})
		$("#qu").change(function(){
		    code_qu = $(this).attr("value");
		    console.log('区：'+code_qu)
		})

		$(".huoqu").click(function() {
		    $(".ceshi").attr("value",`省:${code_city} / 县:${code_shi} / 区：${code_qu}`);
		})

		// 筛选
		// arr{筛选的数组}
		// code{条件编码}
		function filter(arr, code) {
		    var r = [];
		    if (!arr instanceof Array) {
		        throw new Error("请传入数组")
		    }
		    r = arr.filter(function(i){
		        return Number(i.code) === code;
		    })
		    return r[0];
		}

		// 添加option
		// obj{将要遍历的对象}
		// tar{添加的select}
		function setTargetArr(obj, tar) {
		    obj.regionEntitys.forEach(function (i) {
		        var option = document.createElement("option");
		        option.value = i.code;
		        option.text = i.region;
		        tar.appendChild(option);
		    })
		}
		
		// function setTargetArrA(obj, tar) {
		// 	console.log(obj)
		//     obj.regionEntitys.forEach(function (i) {
		//         var option_a = document.createElement("option");
		//         option_a.value = i.code;
		//         option_a.text = i.region;
		//         tar.appendChild(option_a);
		//     })
		// }

	</script>

</body>
</html>